<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>远程文件浏览器</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.8.0/css/layui.css">
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
    <style>
        body { padding: 20px; background: #f8f9fa; }
        .tree-container { 
            border: 1px solid #ddd; 
            padding: 20px; 
            min-height: 400px; 
            background: white;
            border-radius: 5px;
        }
        .loading { 
            text-align: center; 
            color: #999; 
            padding: 50px 0;
        }
        /* 修复layui树的样式问题 */
        .layui-tree-entry {
            position: relative;
            padding: 5px 0;
        }
        .layui-tree-entry .layui-tree-txt {
            margin-left: 25px !important;
            position: relative;
        }
        .layui-tree-line {
            position: absolute;
            left: 0;
        }
        .layui-tree-entry:hover {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <h2>远程文件浏览器</h2>
                
                <form class="layui-form" style="margin-bottom: 20px;">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">主机地址</label>
                                <div class="layui-input-block">
                                    <input type="text" name="hostname" placeholder="例: 192.168.1.100" class="layui-input" required>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="username" placeholder="SSH用户名" class="layui-input" required>
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="password" placeholder="SSH密码" class="layui-input" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">
                            <div class="layui-form-item">
                                <label class="layui-form-label">起始路径</label>
                                <div class="layui-input-block">
                                    <input type="text" name="start_path" value="/home" placeholder="例: /home 或 ." class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">端口</label>
                                <div class="layui-input-block">
                                    <input type="number" name="port" value="22" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <div class="layui-form-item">
                                <label class="layui-form-label">&nbsp;</label>
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="connect">获取文件树</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                
                <div class="tree-container">
                    <div id="fileTree" class="loading">请先配置连接信息并点击获取文件树</div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.8.0/layui.js"></script>
    <script>
        layui.use(['form', 'tree', 'layer'], function(){
            var form = layui.form;
            var tree = layui.tree;
            var layer = layui.layer;
            var socket = io();
            
            socket.on('tree_response', function(response) {
                if (response.success && response.data.length > 0) {
                    tree.render({
                        elem: '#fileTree',
                        data: response.data,
                        showCheckbox: false,
                        id: 'fileTreeDemo',
                        isJump: false,
                        showLine: true,
                        click: function(obj){
                            layer.msg('路径: ' + obj.data.id, {icon: 1});
                        }
                    });
                    layer.msg('文件树加载成功', {icon: 1});
                } else {
                    document.getElementById('fileTree').innerHTML = 
                        '<div class="loading">错误: ' + (response.error || '未知错误') + '</div>';
                    layer.msg(response.error || '获取失败', {icon: 2});
                }
            });
            
            form.on('submit(connect)', function(data){
                document.getElementById('fileTree').innerHTML = '<div class="loading">正在连接并获取文件树...</div>';
                
                socket.emit('get_tree', {
                    hostname: data.field.hostname,
                    username: data.field.username,
                    password: data.field.password,
                    start_path: data.field.start_path || '.',
                    port: parseInt(data.field.port) || 22
                });
                
                return false;
            });
        });
    </script>
</body>
</html>